@import 'src/styles/index';

ns-home {
  @mixin flex-center {
    display: flex;
    align-items: center;
  }

  @keyframes move-clouds-back {
    from {
      background-position: 0 0;
    }
    to {
      background-position: 10000px 0;
    }
  }
  @keyframes move-twink-back {
    from {
      background-position: 0 0;
    }
    to {
      background-position: -10000px 5000px;
    }
  }
  @keyframes shine {
    from {
      background-position: -300px;
    }
    to {
      background-position: 300px;
    }
  }
  @include flex-center();
  position: relative;
  justify-content: center;
  flex-direction: column;
  > section.starry-sky {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    overflow: hidden;
    z-index: -1;
    display: flex;
    justify-content: center;
    align-items: center;
    > .stars,
    > .twinkling,
    > .clouds,
    > .logo {
      position: fixed;
      display: block;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      z-index: -5;
    }
    > .stars {
      z-index: -4;
      background: #000 url(/assets/img/stars.png) repeat top center;
    }
    > .twinkling {
      z-index: -3;
      background: transparent url(/assets/img/twinkling.png) repeat top center;
      animation: move-twink-back 160s linear infinite;
    }
    > .clouds {
      z-index: -1;
      background: transparent url(/assets/img/clouds.png) repeat top center;
      animation: move-clouds-back 200s linear infinite;
      opacity: 0.3;
    }
    > .logo {
      z-index: -2;
      background: transparent url(/assets/img/logo/logo-512x512.png) no-repeat top center;
      opacity: 0.15;
      width: 700px;
      height: 700px;
      filter: blur(8px);
      position: relative;
      align-self: start;
    }
  }
  > section.plugins {
    @include flex-center();
    height: 40rem;
    justify-content: center;
    position: relative;
    width: 100%;
    color: white;
    > .main {
      @include flex-center();
      flex-direction: column;
      justify-content: center;
      // color: #eee;
      // text-shadow: 0 0.125rem rgba(0, 0, 0, 0.7);
      z-index: 1;
      position: relative;
      padding-left: 1.5rem;
      padding-right: 1.5rem;
      > h1 {
        font-size: 4rem;
        line-height: 4rem;
        margin: 2rem;
      }
      > p {
        line-height: 1.5rem;
        margin: 1rem 0;
        &.open-source,
        &.web-application,
        &.angular-nest {
          font-size: 1.4rem;
          margin: 0.625rem 0;
          text-align: center;
          background: $--x-primary -webkit-gradient(
              linear,
              left top,
              right top,
              from($--x-primary),
              to($--x-primary),
              color-stop(0.5, #fff)
            ) 0 0 no-repeat;
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          -webkit-animation: shine 7s infinite;
          text-shadow: 0 0 0 rgba(255, 255, 255, 0.5);
        }
        &.description {
          color: rgba(255, 255, 255, 0.6);
          max-width: 33rem;
          text-align: center;
          margin: 2rem 0;
        }
        &.code-start {
          margin-bottom: 4rem;
          > a {
            padding: 0.625rem 1.4rem;
            background: white;
            user-select: none;
            box-shadow: 0 0 4px 2px rgba(0, 0, 0, 0.1);
            &:first-child {
              border-top-left-radius: 2rem;
              border-bottom-left-radius: 2rem;
            }
            &:last-child {
              border-top-right-radius: 2rem;
              border-bottom-right-radius: 2rem;
              background-color: $--x-primary;
              color: white;
            }
            &:hover {
              opacity: 0.8;
            }
            &:active {
              opacity: 0.6;
            }
          }
        }
      }
    }
    > .data {
      position: absolute;
      right: 0;
      top: 0;
      width: 100%;
      height: calc(100% + 3.75rem);
      margin-top: -3.75rem;
      background: linear-gradient(to right, rgba(0, 21, 134, 0.49) 0%, rgba(63, 81, 181, 0.5) 100%);
    }
  }
  > section.nav {
    background: $--x-background-a100;
    position: absolute;
    overflow: hidden;
    border-radius: 2px;
    width: 80%;
    top: 38.5rem;
    font-weight: 600;
    z-index: 132123123;
    box-shadow: $--x-box-shadow;
    > ul {
      display: flex;
      > li {
        flex: 1;
        display: flex;
        > x-button {
          flex: 1;
          .x-button {
            width: 100%;
            font-size: 0.875rem;
          }
        }
      }
    }
  }
  > section.content {
    @include flex-center();
    flex-direction: column;
    width: 100%;
    background-color: $--x-background;
    > .panel {
      width: 100%;
      &:nth-child(odd) {
        background-color: $--x-background-a100;
      }
      > .box {
        padding: 7rem 0;
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 80%;
        margin: auto;
        > img {
          width: 8rem;
          height: 8rem;
        }
        > h1 {
          color: $--x-primary;
          text-align: center;
          margin: 0.625rem 0;
        }
      }
      > .slides {
        width: 80%;
        position: relative;
        display: flex;
        align-items: center;
        margin: auto;
        padding-bottom: 5rem;
        > .slide {
          width: 30%;
          > .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 1.6rem;
            > img {
              width: 4rem;
              height: 4rem;
            }
            > h3 {
              color: $--x-primary;
            }
          }
        }
      }
    }
  }
  &.small {
    > section.content > .panel > .slides {
      flex-wrap: wrap;
      justify-content: center;
      > .slide {
        width: 50%;
      }
    }
  }
  &.xsmall {
    > section.content > .panel > .slides {
      flex-wrap: wrap;
      justify-content: center;
      > .slide {
        width: 100%;
      }
    }
  }
}
